<template>
    <div class="myShare">
        <h3>文件存储</h3>
        <div class="info">
            <div class="condition">
                <div class="left">
                    <!-- 标题
                    <input type="text" v-model="title" /> -->
                    账期
                    <el-date-picker
                        v-model="fileTime"
                        clearable
                        format="yyyy-MM"
                        type="month"
                        value-format="yyyy-MM"
                        :picker-options="endDateDisabled"
                        style="width: 140px; margin-right: 15px;"
                    ></el-date-picker>
                    <el-button
                        type="primary"
                        style="background: #7f92f7;border-color: #7f92f7; padding: 8px 15px;"
                        @click="goSearch"
                        size="small"
                        >查询</el-button
                    >
                    <el-button
                        type="primary"
                        style="background: #7f92f7;border-color: #7f92f7;padding: 8px 15px;"
                        size="small"
                        @click="
                            nextPath('/budget/uploadStorageFiles')
                        "
                        >上传分享</el-button
                    >
                </div>
            </div>
            <div class="table" style="width: 100%;">
                <el-table
                    style="width: 100%;"
                    border
                    :data="myShareTable"
                    v-loading="tableLoading"
                    :header-cell-style="{
                        background: '#d7e5fb',
                        color: '#464C69',
                        padding: '6px 0',
                        'font-size': '12px'
                    }"
                    :cell-style="{
                        padding: '8px 0',
                        color: '#21263E',
                        'font-size': '12px'
                    }"
                    max-height="500px"
                >
                    <el-table-column
                        prop="title"
                        align="center"
                        show-overflow-tooltip
                        label="标题"
                    />
                    <el-table-column
                        prop="areaName"
                        align="center"
                        width="200"
                        label="区域"
                    />
                    <el-table-column
                        prop="createUserName"
                        align="center"
                        width="200"
                        label="上传人"
                    />
                    <el-table-column
                        prop="descript"
                        align="center"
                        width="200"
                        label="描述"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        prop="acctMonth"
                        align="center"
                        width="200"
                        label="上传时间"
                    />
                    <el-table-column label="操作" width="230" align="center">
                        <template slot-scope="scope">
                            <span
                                style="color:#7f92f7; font-size:12px;cursor: pointer;margin-right: 20px"
                                @click="handleClick(scope.$index, scope.row)"
                                >查看详情 </span
                            >
                            <!-- <span
                                style="color:#7f92f7; font-size:12px;cursor: pointer; display: inline-block; padding: 0 40px;"
                                @click="handleEdit(scope.$index, scope.row)"
                                >修改</span
                            > -->
                            <span
                                style="color:#f3707c; font-size:12px;cursor: pointer;"
                                @click="handleDelete(scope.$index, scope.row)"
                                > 删除</span
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 翻页 -->
            <!-- <div class="page" v-if="dataTotal">
        <el-pagination
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[10, 50, 100]"
          @size-change="sizeChange"
          :page-size="pageSize"
          :total="dataTotal"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>-->

            <!-- 翻页 -->
            <div class="page" v-if="dataTotal">
                <span class="jumper">
                    <span class="go" @click="searchSize">跳至</span>
                    <input
                        @keyup="vaildSize"
                        v-model="currentPageInput"
                        class="num"
                        min="1"
                        type="number"
                        autocomplete="off"
                    />页
                </span>
                <!-- <span class="sizes">
          <el-select @change="currentSel" v-model="pageSize" class="sizeinput">
            <el-option
              v-for="item in pagesOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </span>-->
                <el-pagination
                    layout="prev, pager, next, sizes, total"
                    :page-sizes="[10, 50, 100]"
                    @size-change="sizeChange"
                    :page-size="pageSize"
                    :total="dataTotal"
                    :current-page.sync="currentPage"
                    @current-change="handleCurrentChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { _formatYMD } from "@/utils/common";

export default {
    data() {
        return {
            tableLoading: true,
            // typeId: "",
            // title: "",
            fileTime: "",
            // status: "",
            endDateDisabled: {
                disabledDate: time => {
                    // return time.getTime() > Date.now() - 8.64e7;
                    return time.getTime() > Date.now();
                }
            },
            myShareTable: [],
            /* yearOptions: [
                {
                    value: "",
                    label: "全部"
                }
            ], */
            /* monthOptions: [
                {
                    value: "",
                    label: "全部"
                },
                {
                    value: "01",
                    label: "1月"
                },
                {
                    value: "02",
                    label: "2月"
                },
                {
                    value: "03",
                    label: "3月"
                },
                {
                    value: "04",
                    label: "4月"
                },
                {
                    value: "05",
                    label: "5月"
                },
                {
                    value: "06",
                    label: "6月"
                },
                {
                    value: "07",
                    label: "7月"
                },
                {
                    value: "08",
                    label: "8月"
                },
                {
                    value: "09",
                    label: "9月"
                },
                {
                    value: "10",
                    label: "10月"
                },
                {
                    value: "11",
                    label: "11月"
                },
                {
                    value: "12",
                    label: "12月"
                }
            ], */
            /* pagesOptions: [
              {
                value: 10,
                label: "10条/页"
              },
              {
                value: 50,
                label: "50条/页"
              },
              {
                value: 100,
                label: "100条/页"
              }
            ], */
            // fileYear: "",
            // fileMonth: "",
            currentPage: 1,
            pageSize: 10,
            dataTotal: 0,
            currentPageInput: 1,
            totalPage: 0
        };
    },
    mounted() {
        // this.getYears();
        this.getData();
    },
    methods: {
        goSearch() {
            this.currentPage = 1;
            this.getData();
        },
        //获取数据
        getData() {

            this.tableLoading = true;
            let fileTime = "";
            if(this.fileTime){
                let time = this.fileTime.split("-");
                fileTime = time[0] + time[1];
            }
            $budgetAPI.storageFiles(
                {
                    // title: this.title,
                    // fileYear: this.fileYear,
                    // fileMonth: this.fileMonth,
                    acctMonth: fileTime,
                    // typeId: this.typeId,
                    // status: this.status,
                    currentPage: this.currentPage,
                    pageSize: this.pageSize
                },
                res => {
                    this.alertError(res);

                    if (res.code == 0) {
                        res.content.items.map(it => {
                            // it.fileTime = it.fileYear + "/" + it.fileMonth;
                            // it.createTime = _formatYMD(it.createTime);
                            
                            // let date = it.acctMonth.trim();
                            let year = it.acctMonth.trim().slice(0,4);
                            let month = it.acctMonth.trim().slice(4,7);
                            it.acctMonth = year + '/' + month;
                        });


                        this.myShareTable = res.content.items;
                        this.dataTotal = res.content.totalNum;
                        this.currentPage = res.content.currentPage;
                        this.totalPage = res.content.totalPage;
                        // console.log(this.myShareTable);
                    }
                    this.tableLoading = false;
                }
            );
        },
        nextPath(path) {
            this.$router.push({ name: "uploadStorageFiles" });
        },
        handleClick(index, row) {
            this.fileId = row.fileId;
            this.$router.push({
                path: "/budget/uploadStorageFilesDetail",
                query: { seq: row.fileId }
            });

            // this.$router.push({
            //   name: "uploadShareDetail",
            //   params: { seq: row.fileId }
            // });
        },
        // handleEdit(index, row) {
        //     // this.fileId = row.fileId;
        //     this.$router.push({
        //         path: "/budget/uploadMyShare",
        //         query: { seq: row.fileId }
        //     });
        //     // this.$router.push({
        //     //   name: "uploadShare",
        //     //   params: { seq: row.fileId }
        //     // });
        // },
        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    if(row.isCurrentUser != 1){
                        this.$message.error('删除失败');
                        return;
                    }
                    $budgetAPI.deleteStorageFiles(
                        { fileId: row.fileId },
                        res => {
                            this.alertError(res);
                            if (res.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功"
                                });
                                this.getData();
                            }
                        },
                        err => {}
                    );
                })
                .catch(() => {});
        },
        /* getYears() {
            let that = this,
                year = new Date().getFullYear() + "";

            $budgetAPI.shareForyears({}, res => {
                res.content.map((it, i) => {
                    that.yearOptions.push({ value: "" + it, label: it });
                });
                that.fileYear = "";
                that.fileMonth = "";
                that.getData();
            });
        }, */
        //页码改变
        sizeChange(val) {
            this.pageSize = val;
            this.getData();
        },
        handleCurrentChange(page) {
            this.currentPage = +page;
            //将当前页传到保存的form表单
            // this.begin = page;
            this.getData();
        },
        // searchSize(val) {
        //   console.log(val);
        //   this.currentPage = +val.target.value;
        //   this.getData();
        // },
        searchSize() {
            this.currentPage = +this.currentPageInput;
            this.getData();
        },
        // currentSel(val) {
        //   this.sizeChange(val);
        // },
        vaildSize(e) {
            this.$nextTick(() => {
                if (!this.currentPageInput) {
                    return;
                }
                if (!isNaN(this.currentPageInput)) {
                    if (+this.currentPageInput < 1) {
                        this.currentPageInput = 1;
                    } else if (+this.currentPageInput > this.totalPage) {
                        this.currentPageInput = this.totalPage;
                    } else {
                        this.currentPageInput = this.currentPageInput;
                    }
                } else {
                    this.currentPageInput = 1;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
$fontColor: #6a82fd;
$title: #666;
$borderColor: #ddd;
$fontSize: 16px;

body {
    height: 100%;
}
.myShare {
    border-radius: 2px;
    height: 100%;
    h3 {
        padding: 15px 17px;
        border-bottom: 1px solid #dedede;
        text-align: left;
        color: $fontColor;
        font-size: $fontSize;
    }
    .info {
        margin: 10px;
        .condition {
            display: flex;
            align-items: center;
            justify-items: center;
            justify-content: space-between;
            .left {
                color: $title;
                .fileYear {
                    width: 85px;
                    height: 30px;
                    /deep/ .el-input__inner {
                        border-radius: 0;
                        border: 1px solid #ddd;
                        height: 30px;
                        font-size: 12px;
                        color: #333;
                    }
                }
            }
            input {
                border: 1px solid $borderColor;
                height: 30px;
                width: 120px;
                padding: 0 10px;
                width: 200px;
                margin-right: 15px;
            }
            /deep/ .el-input__icon {
                line-height: 30px;
            }
        }
        .table {
            margin-top: 10px;
            /deep/ .el-table .cell {
                color: #636d9a;
            }
        }
        .page {
            display: flex;
            align-items: center;
            flex-flow: row-reverse;
            .sizes {
                margin-left: 20px;
                margin-right: 16px;
                .sizeinput {
                    /deep/ .el-input__inner {
                        width: 100px;
                        border-radius: 0;
                        border: 1px solid #aaa;
                        height: 30px;
                        font-size: 12px;
                        color: #aaa;
                        border-radius: 3px;
                    }
                    /deep/ .el-input__icon {
                        line-height: 30px;
                    }
                }
            }

            .jumper {
                font-size: 13px;
                color: #aaa;
                height: 30px;
                line-height: 30px;
                .go {
                    display: inline-block;
                    cursor: pointer;
                    color: #aaa;
                    &:hover {
                        color: #6a82fd;
                    }
                }
                .num {
                    max-width: 40px;
                    padding: 0 10px;
                    height: 30px;
                    line-height: 30px;
                    vertical-align: middle;
                    border-radius: 3px;
                    border: 1px solid #aaa;
                    color: #aaa;
                    margin: 0 10px;
                    text-align: center;
                }
                input[type="number"] {
                    -moz-appearance: textfield;
                }
                input[type="number"]::-webkit-inner-spin-button,
                input[type="number"]::-webkit-outer-spin-button {
                    -webkit-appearance: none;
                    margin: 0;
                }
            }
        }
        .page /deep/ .el-pagination .btn-next,
        .el-pagination .btn-prev {
            color: #aaa;
        }
        .page /deep/ .el-pagination {
            padding: 0;
        }
        .page /deep/ .el-pager li.active {
            background-color: #6a82fd;
            border-color: #6a82fd;
            color: #fff;
        }
        .page /deep/.el-pager li {
            min-width: 30px;
            height: 30px;
            border: 1px solid #aaa;
            color: #aaa;
            font-weight: 500;
            margin-right: 10px;
            border-radius: 5px;
            &:last-child {
                margin-right: 0;
            }
        }
        .page /deep/ .el-pagination .el-pagination__sizes .el-input__inner {
            border-color: #aaa;
            color: #aaa;
            height: 30px;
            line-height: 30px;
        }
    }
}
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: #f0f1f5;
}
/deep/ .el-table--border td {
    border-right: 1px solid #cdcfd9;
}
/deep/ .el-table td,
.el-table th.is-leaf {
    border-bottom: 1px solid #cdcfd9;
}
</style>
